﻿/// <reference path="jquery-1.3.2.js" />


function successFunction(jsondata) {
    var thegrid = jQuery("#productGridView")[0];
    thegrid.addJSONData(JSON.parse(jsondata.d));
}

function getProducts() {
    $.ajax({
        url: "DataLoader.svc/GetProducts",
        data: "{}",  // For empty input data use "{}",
        dataType: "json",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        success: successFunction
    });
}

function dataBindToGrid() {
        jQuery("#productGridView").jqGrid({
            datatype: getProducts,
            colNames: ['ProductID', 'Name', 'ProductNumber', 'Color', 'Size', 'Style'],
            colModel: [{ name: 'ProductID', index: 'ProductID', width: 200, align: 'left' },
                        { name: 'Name', index: 'Name', width: 200, align: 'left' },
                        { name: 'ProductNumber', index: 'ProductNumber', width: 200, align: 'left' },
                        { name: 'Color', index: 'Color', width: 200, align: 'left' },
                        { name: 'Size', index: 'Size', width: 200, align: 'left' },
                        { name: 'Style', index: 'Style', width: 200, align: 'left' }
                       ],
            rowNum: 10,
            rowList: [5, 10, 20, 50, 100],
            sortname: 'ProductID',
            pager: jQuery('#pageNavigation'),
            sortorder: "desc",
            viewrecords: true
        });
    }
jQuery(document).ready(function() {

    jQuery("input#LoadData").live("click", dataBindToGrid);
});

